<!--
 * @Descripttion: 
 * @version: 
 * @Author: wtzhang
 * @Date: 2021-07-28 15:09:12
 * @LastEditors: wtzhang
 * @LastEditTime: 2022-01-17 15:19:09
-->
<template>
    <div>
      <h3>当前最新 count 值： {{$store.state.count}}</h3>
      <button @click="btnHander">+1</button><br><br>
      <button @click="btnHander2">异步+1</button><br><br>
      <button @click="btnHander3">异步带参数+step</button><br><br>
      <button @click="btnHander4">第二种触发actions方法，异步带参数+step</button><br><br>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  data(){
    return {}
  },
  methods: {
    btnHander() {
      // 触发Mutation的第一种方式
      // this.$store.commit('add')
      this.$store.commit('addN', 3)
    },
    btnHander2(){
      // 触发 actions 的第一种方式
      this.$store.dispatch('addAsync')
    },
    btnHander3(){
      // 触发 actions 的第一种方式
      this.$store.dispatch('addAsync2', 2)
    },
    // 触发 actions 的第二种方式
    ...mapActions(['addAsync2']),
    btnHander4(){
      // 触发 actions 的第一种方式
      this.addAsync2(2)
    },
  }
}
</script>

<style lang="scss" scoped>
    
</style>